import React, { useState } from "react"

const UseStateComponent = (props) => {
    console.log(111)
    const [count, setCount] = useState(0)
    const [person, setPerson] = useState(() => props.person)

    const changeCount1 = () => {
        // setState是异步的方法
        setCount(count + 1)
        document.title = count
    }

    const changeCount2 = () => {
        // 更新状态值的函数的参数也可以是函数
        setCount((count) => {
            const num = count + 1
            document.title = num
            return num
        })
    }

    return (
        <div>
            <h1>useState</h1>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>计数1</button>
            <button onClick={changeCount1}>计数2</button>
            <button onClick={changeCount2}>计数3</button>
            <p>{person}</p>
            <button onClick={() => setPerson('nini')}>修改人名</button>
        </div>
    )
}

export default UseStateComponent